<template>
  <ItemMusicTop :playList="state.playList"/>
  <ItemMusicList :itemList="state.itemList" :subscribedCount="state.playList.subscribedCount"/>
</template>

<script>
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getItemList, getMusicItemList } from '@/utils/api/item'
import ItemMusicList from '@/components/ItemMusicList.vue'
import ItemMusicTop from '@/components/ItemMusicTop.vue'

  export default {
    setup() {
      const state = reactive({
        playList: [],  //歌单的详情页的数据
        itemList: []  //歌单的歌曲
      })
      onMounted(async() => {
        let id = useRoute().query.id
        console.log(id);
        // 获取歌单详情页
        let res = await getMusicItemList(id)
        console.log(res);
        state.playList = res.data.playlist
        // 获取歌单的歌曲
        let result = await getItemList({id, limit: 10, offset: 0})
        console.log(result);
        state.itemList = result.data.songs

        // 防止页面刷新数据丢失，将数据保存到sessionStorage中
        sessionStorage.setItem("itemDetail", JSON.stringify(state))
      })
      return { state }
    },

    components: {
      ItemMusicList, ItemMusicTop
    }
  }
</script>

